<%@ include file="/common.jsp" %>
<%@ page contentType="text/html; charset=UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>合格产品管理</title>
</head>
<body>

<div class="container mt-5">

    <form class="form-inline mb-3">
        <input type="text" id="searchKeyword" class="form-control mr-2" placeholder="搜索关键字">
        <button type="button" class="btn btn-secondary" onclick="searchQualifiedProducts()">搜索</button>
    </form>

    <table class="table">
        <thead>
        <tr>
            <th>批准编号</th>
            <th>物品编号</th>
        </tr>
        </thead>
        <tbody id="qualifiedProductTableBody">
        <!-- Table content will be dynamically populated here -->
        </tbody>
    </table>

    <!-- 分页 -->
    <div class="d-flex justify-content-between">
        <button class="btn btn-secondary" id="prevPageBtn">&lt; 上一页</button>
        <button class="btn btn-secondary" id="nextPageBtn">下一页 &gt;</button>
    </div>
</div>

<!-- 添加合格产品模态框 -->
<div class="modal fade" id="addQualifiedProductModal" tabindex="-1" role="dialog" aria-labelledby="addQualifiedProductModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="addQualifiedProductModalLabel">添加合格产品</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <!-- 添加合格产品表单 -->
                <form id="addQualifiedProductForm">
                    <div class="form-group">
                        <label for="approvedNumber">批准编号</label>
                        <input type="number" class="form-control" id="approvedNumber" name="approvedNumber" required>
                    </div>
                    <div class="form-group">
                        <label for="itemNumber">物品编号</label>
                        <input type="number" class="form-control" id="itemNumber" name="itemNumber" required>
                    </div>
                    <button type="submit" class="btn btn-primary">添加</button>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- 编辑合格产品模态框 -->
<div class="modal fade" id="editQualifiedProductModal" tabindex="-1" role="dialog" aria-labelledby="editQualifiedProductModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="editQualifiedProductModalLabel">编辑合格产品</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <!-- 编辑合格产品表单 -->
                <form id="editQualifiedProductForm">
                    <input type="hidden" id="editApprovedNumber" name="approvedNumber">
                    <div class="form-group">
                        <label for="editItemNumber">物品编号</label>
                        <input type="number" class="form-control" id="editItemNumber" name="itemNumber" required>
                    </div>
                    <button type="submit" class="btn btn-primary">保存修改</button>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- 自定义JS -->
<script>
    var currentPage = 1;
    var pageSize = 5;

    // 加载合格产品数据的函数
    function loadQualifiedProducts(page, size) {
        $.ajax({
            url: "${pageContext.request.contextPath}/qualifiedProduct?operation=getQualifiedProductsByPage&start=" + page + "&pageSize=" + size,
            type: "GET",
            dataType: "json",
            success: function (response) {
                $("#qualifiedProductTableBody").empty();
                $.each(response.data, function (index, product) {
                    $("#qualifiedProductTableBody").append(
                        "<tr data-id='" + product.approvedNumber + "'>" +
                        "<td>" + product.approvedNumber + "</td>" +
                        "<td>" + product.itemNumber + "</td>" +
                        "</tr>"
                    );
                });
            },
            error: function () {
                alert("获取数据时出错！");
            }
        });
    }

    // 提交添加合格产品表单的函数
    $("#addQualifiedProductForm").submit(function (event) {
        event.preventDefault();
        $.ajax({
            url: "${pageContext.request.contextPath}/qualifiedProduct?operation=addQualifiedProduct",
            type: "POST",
            data: $(this).serialize(),
            dataType: "json",
            success: function (response) {
                loadQualifiedProducts(currentPage, pageSize);
                $("#addQualifiedProductForm")[0].reset();
                $("#addQualifiedProductModal").modal("hide");
                alert("合格产品添加成功！");
            },
            error: function () {
                alert("添加合格产品时出错！");
            }
        });
    });

    // 填充编辑合格产品模态框数据的函数
    function populateEditModal(approvedNumber) {
        var productRow = $("table tbody").find("tr[data-id='" + approvedNumber + "']");
        var itemNumber = productRow.find("td:eq(1)").text();
        $("#editApprovedNumber").val(approvedNumber);
        $("#editItemNumber").val(itemNumber);
    }

    // 提交编辑合格产品表单的函数
    $("#editQualifiedProductForm").submit(function (event) {
        event.preventDefault();
        $.ajax({
            url: "${pageContext.request.contextPath}/qualifiedProduct?operation=updateQualifiedProduct",
            type: "POST",
            data: $(this).serialize(),
            dataType: "json",
            success: function (response) {
                loadQualifiedProducts(currentPage, pageSize);
                $("#editQualifiedProductModal").modal("hide");
                alert("合格产品更新成功！");
            },
            error: function () {
                alert("更新合格产品时出错！");
            }
        });
    });

    // 处理编辑按钮点击的函数
    function editQualifiedProduct(approvedNumber) {
        populateEditModal(approvedNumber);
        $("#editQualifiedProductModal").modal("show");
    }

    // 删除合格产品的函数
    function deleteQualifiedProduct(approvedNumber) {
        if (confirm("确定要删除这个合格产品吗？")) {
            $.ajax({
                url: "${pageContext.request.contextPath}/qualifiedProduct?operation=deleteQualifiedProduct",
                type: "POST",
                data: { approvedNumber: approvedNumber },
                dataType: "json",
                success: function (response) {
                    loadQualifiedProducts(currentPage, pageSize);
                    alert("合格产品删除成功！");
                },
                error: function () {
                    alert("删除合格产品时出错！");
                }
            });
        }
    }

    // 处理搜索合格产品的函数
    function searchQualifiedProducts() {
        var keyword = $("#searchKeyword").val();
        $.ajax({
            url: "${pageContext.request.contextPath}/qualifiedProduct?operation=findQualifiedProductsByKeyword&keyword=" + keyword,
            type: "GET",
            dataType: "json",
            success: function (response) {
                $("#qualifiedProductTableBody").empty();
                $.each(response.data, function (index, product) {
                    $("#qualifiedProductTableBody").append(
                        "<tr data-id='" + product.approvedNumber + "'>" +
                        "<td>" + product.approvedNumber + "</td>" +
                        "<td>" + product.itemNumber + "</td>" +
                        "</tr>"
                    );
                });
            },
            error: function () {
                alert("搜索合格产品时出错！");
            }
        });
    }

    // 处理分页的函数
    $("#prevPageBtn").click(function () {
        if (currentPage > 1) {
            currentPage--;
            loadQualifiedProducts(currentPage, pageSize);
        }
    });

    $("#nextPageBtn").click(function () {
        currentPage++;
        loadQualifiedProducts(currentPage, pageSize);
    });

    $(document).ready(function () {
        loadQualifiedProducts(currentPage, pageSize);
    });

    // 手动移除模态框隐藏时的背景遮罩，防止黑色阴影
    $('#addQualifiedProductModal, #editQualifiedProductModal').on('hidden.bs.modal', function () {
        $('.modal-backdrop').remove();
    });
</script>

</body>
</html>
